import { useLazyGetNewsByCompanyNameQuery } from "../api/news";
import { images, translateData } from "../data/data";
import { getSumm } from "../helpers/functions";

export const ShareCard = ({ s, elem, onOpenModal, setData }) => {
  const [getNewsByCompanyName, { isError, isLoading }] =
    useLazyGetNewsByCompanyNameQuery();

  const onClickHandler = async () => {
    try {
      onOpenModal();
      let stringName = String(elem.Name);
      const response = await getNewsByCompanyName(stringName);
      setData(response.data);
    } catch (e) {
      console.error("Error fetching surprise:", e);
    }
  };

  return (
    <div className={s.shares__card} onClick={() => onClickHandler()}>
      <div className={s.shares__card__left}>
        <img
          src={
            images[elem.Name]
              ? images[elem.Name]
              : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtD0zrHrCM7LhCcOjHXWwWtLhILOD7GEq4yuWSt2aLqQ&s"
          }
          className={s.shares__card__left__img}
        />
        <div>
          <div className={s.shares__card__left__name}>{elem.Name}</div>
          <div className={s.shares__card__left__info}>
            <span>{elem.quantityLots.units} шт. </span>
            <span>{translateData[elem.instrumentType]}</span>
          </div>
        </div>
      </div>

      <div className={s.shares__card__right}>
        <div className={s.shares__card__right__price}>
          {getSumm(elem.quantityLots.units, elem.currentPrice.units)} руб.
        </div>

        <div className={s.shares__card__right__pricePerOne}>
          {elem.currentPrice.units} руб за 1 шт.
        </div>
      </div>
    </div>
  );
};
